<template>
	<view style="background: #F5F5F5;" class="content">
		<uni-bar :right-text="isedit?'完成':'编辑'" title="购物车" :statusBar="true" @shadow="false" @click-right="isedit=!isedit" :fixed="true"></uni-bar>
		
		
		<!-- 购物车为空 -->
		<view class="py-5 d-flex a-center j-center bg-white" v-if="false">
			<view class="iconfont iconaixin text-light-muted" style="font-size: 50rpx;"></view>
			<text class="text-light-muted mx-2">购物车为空</text>
			<view class="px-2 border border-light-secondary rounded py-1" hover-class="bg-light-secondary">去逛逛</view>
		</view>
		
		
		<!-- 购物车商品列表 -->
		<view class="bg-white px-2">
			<view class="d-flex a-center py-3 border-bottom border-light-secondary" v-for="i in 8">
				<label class="radio d-flex a-center j-center flex-shrink" style="width: 100rpx;height: 100rpx;" @click="ischeck=!ischeck">
					<radio value="1" color="#FD6801" :checked="ischeck"/> 
				</label>
				<image src="../../static/imgs/2.png" style="width: 160rpx;height: 160rpx;" class="rounded border border-light-secondary p-2 flex-shrink"></image>
				<view class="flex-1 d-flex flex-column mt-1 ml-1">
					<view class="text-dark" style="font-size: 35rpx;">
						商品标题
					</view>
					<view class="d-flex text-light-muted my-1">
						<text class="mr-1">abcd</text>
					</view>
					<view class="mt-auto d-flex j-sb">
						<price>3456</price>
						<view class="a-self-end">
							<uni-number :min="1" :max="10" :value="2"></uni-number>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="d-flex j-sb pl-2 a-center bg-white a-strentch position-fixed  left-0 right-0" style="height: 100rpx;bottom: 100rpx;">
			<label class="radio d-flex a-center j-center flex-shrink" style="width: 100rpx;height: 100rpx;" @click="ischeck=!ischeck">
				<radio value="1" color="#FD6801" :checked="ischeck"/> 
			</label>	
				<view class="d-flex a-center flex-1 j-center">
					合计：<price>0</price>
				</view>
				<view class="flex-1 d-flex j-center a-center main-bg-color font-md text-white">
					结算
				</view>
		</view>
		
	</view>
</template>

<script>
	import uniBar from "@/components/uni-ui/uni-nav-bar/uni-nav-bar.vue"
	import price from "@/components/index/price.vue"
	import uniNumber from "@/components/uni-ui/uni-number-box/uni-number-box.vue"
	export default{
		components:{
			uniBar,
			price,
			uniNumber
		},
		data(){
			return{
				isedit:false,
				ischeck:false,
			}
		}
	}
</script>

<style>
	.content{
		padding-bottom: calc(var(--window-bottom) + 100rpx);
	}
</style>
